<template>
  <el-dialog title="修改类型" :close-on-click-modal="false" :visible.sync="classalert" v-loading.fullscreen.lock="vloading">
    <el-form :model="form">
      <el-row>
        <el-col :span="22">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" placeholder="请输入分类名称" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 分类简介 -->
      <el-row>
        <el-col :span="22">
          <el-form-item label="分类简介" :label-width="formLabelWidth">
            <el-input v-model="form.intro" type="textarea" :rows="2" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
    <el-row>
        <el-col :span="22">
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="form.order" type="textarea" :rows="2" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="classalert = false">取 消</el-button>
      <el-button type="primary" @click="ok">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    updatetype
  } from "@/api/user/user.js";
  export default {
    name: "serviceadd",
    data() {
      var $domain = process.env.VUE_APP_BASE_API;
      return {
        domain: $domain,
        listinfo: [],
        classalert: false,
        vloading: false,
        form: {},
        formLabelWidth: '120px'
      };
    },
    methods: {
      add(res) {
        var that = this;
        that.form = res
        that.classalert = true;
        //   for (var i in that.form) {
        //     that.form[i] = "";
        //   }
      },
      ok() {
        this.vloading = true;
        this.requestadd();
      },
      requestadd() {
        let that = this,
          data = {
            field: "type_id",
            value: that.form.type_id,
            name: that.form.name,
            intro: that.form.intro,
            order:that.form.order
          };
        updatetype(data).then(() => {
          that.$emit('then')
          that.classalert = false;
          that.vloading = false;
        });
      }
    }
  };
</script>

<style>
  .el-form--inline .el-form-item__content {
    display: block;
  }

  .el-upload--picture-card {
    margin: 1%;
    position: relative;
    overflow: hidden;
    display: inline-block;
  }

  .close {
    opacity: 0;
    transition: opacity 0.3s;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s;
  }

  .el-upload--picture-card:hover .close {
    opacity: 1;
  }

  .close>i {
    margin: auto;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>
